
<script>
export default {
  render () {
    const slot = this.$slots.default()
    const arr = []
    slot.forEach((v, i) => {
      arr.push(v)
      // arr.push(h('i', { class: 'iconfont icon-angle-right' }))
      if (i < slot.length - 1) arr.push(<i class='iconfont icon-angle-right'/>)
    })
    // h('div', { class: 'xtx-bread' }, arr)
    return <div class='xtx-bread'>{arr}</div>
  },
  name: 'XtxBread',
  props: {
    parentName: {
      type: String,
      default: ''
    },
    parentPath: {
      type: String,
      default: ''
    }
  }
}
</script>

<style  lang='less'>
.xtx-bread{
  display: flex;
  padding: 25px 10px;
  &-item {
    a {
      color: #666;
      transition: all .4s;
      &:hover {
        color: @xtxColor;
      }
    }
  }
  i {
    font-size: 12px;
    margin-left: 5px;
    margin-right: 5px;
    line-height: 22px;
  }
}
</style>
